<template>
  <div>
    <el-card shadow="always" style="margin: 20px; height: 110px">
      <div style="float: left;">
        <el-avatar
          style="width: 76px; height: 76px ;margin-right: 10px;"
          :src="user.avatar"
        />
      </div>
      <br>
      <!-- <i style="float: right; margin-right: 10px;padding-right: 10px; color:orangered;" class="el-icon-edit"><span style="color: black; font-size: 15px;margin-left: 5px;">待办</span><br><br><span style="color: black">{{ data.docuToDoTotal + '/' + data.docuTotal }}</span></i> -->

      <span style="height: 20px; width: 20px; padding-bottom: 40px;margin-top: 20px;">
        {{ title }}
      </span><br><br>
      <span style="color: #999; font-size: 12px;">{{ weatherInfo }}</span>

    </el-card>

    <!-- 下面的卡片 -->
    <el-row :gutter="24" style="margin: 18px;margin-right: 18px;">
      <el-col :span="6">
        <el-card shadow="always" style="color: #999;">
          教师人数

          <el-divider />

          <span>{{ data.teacherTotal }}</span><i style="float: right; color:orangered;" class="el-icon-s-custom" />
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="always" style="color: #999;">
          资料总数

          <el-divider />

          <span>{{ data.docuTotal }}</span><i style="float: right; color:orangered;" class="el-icon-folder-opened" />
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="always" style="color: #999;">
          资料规范总数

          <el-divider />

          <span>{{ data.docuInduceTotal }}</span><i style="float: right; color:orangered;" class="el-icon-folder" />
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="always" style="color: #999;">
          资料上传数量

          <el-divider />

          <span>{{ data.docuDataTotal }}</span><i style="float: right;color: orangered;" class="el-icon-s-marketing" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { query } from '@/api/index.js'
import { information } from '@/api/teacher.js'
import axios from 'axios'

export default {
  data() {
    return {
      data: {},
      user: {},
      title: '',
      weatherInfo: ''
    }
  },
  created() {
    this.fetchWeatherInfo()
  },
  mounted() {
    this.query()
    this.getUser()
    this.fetchWeatherInfo()
  },
  methods: {
    query() {
      query().then(res => {
        this.data = res.data
      })
    },
    getUser() {
      information().then(res => {
        this.user = res.data
        if (res.data.roles == 'user') {
          this.title = '您好，教师' + res.data.name + '！欢迎使用教务管理系统！'
        } else {
          this.title = '您好，教务' + res.data.name + '！欢迎使用教务管理系统！'
        }
        console.log('this.user', this.user)
      })
    },
    // 获取天气信息
    async fetchWeatherInfo() {
      try {
        const response = await axios.get('https://api.openweathermap.org/data/2.5/weather?q=ZhangJiaJie,cn&APPID=1413859a7268250955d23ec246a08c9a&lang=zh_cn')
        const weatherData = response.data
        const tempMinCelsius = Math.floor(weatherData.main.temp_min - 273.15)
        const tempMaxCelsius = Math.ceil(weatherData.main.temp_max - 273.15)
        this.weatherInfo = `今天天气${weatherData.weather[0].description}，气温在${tempMinCelsius}℃到${tempMaxCelsius}℃之间`
      } catch (error) {
        console.error('获取天气信息失败', error)
      }
    }
  }
}

</script>
